<template>
  <el-container
    style="height:100% !important;margin:0;overflow-y:hidden;overflow-x:hidden;"
  >
    <el-header style="background: white ;">
      <el-row>
        <el-col
          :xs="16"
          :sm="18"
          :md="20"
          :lg="21"
          style="height:100% !important;text-align: left !important;padding-left: 50px;"
        >
          Logo
        </el-col>
        <el-col :xs="8" :sm="6" :md="4" :lg="3" style="height:100% !important">
          {{ username }}
          <el-link @click="onLogout" type="primary">登出</el-link>
        </el-col>
      </el-row>
    </el-header>

    <el-row style="height:100% !important">
      <el-col :xs="8" :sm="6" :md="4" :lg="3" style="height:100% !important">
        <!-- 这里放aside -->
        <slot name="aside"></slot>
      </el-col>
      <el-col
        :xs="16"
        :sm="18"
        :md="20"
        :lg="21"
        style="height:100% !important"
      >
        <el-container style="height:100% !important">
          <!-- 这里放aside对应的页面 -->
          <slot name="aside-content"></slot>
        </el-container>
      </el-col>
    </el-row>
  </el-container>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { MessageBox } from "element-ui";

import { logoutAccount } from "@/apis/Account";
import { removeAccessToken, removeRefreshToken } from "@/utils/token";
import { getReqDataNew } from "@/utils/http";
import router from "@/router";
import { rNames } from "@/config/menuConfig";
import { failDataType } from "CustomTypes";
import { getAccount, removeAccount, logout } from "@/utils/account";
import { UsernameModule } from "@/store/modules/UserNameModule";

/**
 * 自定义的能够自适应的布局。
 */
@Component({ name: "MyLayout" })
export default class MyLayout extends Vue {
  get username() {
    return getAccount();
  }

  onLogout() {
    logout();
  }
}
</script>

<style>
.my-container {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
</style>
